<template>
  <div class="line-management-container">
    <vab-list-notice :content-array="contentArray" />
    <div class="page-search"></div>
    <el-table v-loading="listLoading" :data="list">
      <el-table-column align="center" label="序号" prop="id" width="55" />
      <el-table-column align="center" label="会员" width="160">
        <template #default="{ row }">
          <div class="list-item">
            <img class="list-item-avatar" alt="" :src="row.avatar" />
            <div class="list-item-meta">
              <div class="list-item-meta-name">
                {{ row.username }}
              </div>
              <div class="list-item-meta-age">
                <div>编号:{{ row.sn }}</div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="年龄要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div v-if="row.max_age === null && row.min_age === null">不限</div>
          <div v-else>
            {{ row.min_age !== null ? row.min_age : '不限' }}-{{
              row.max_age !== null ? row.max_age : '不限'
            }}岁
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="身高要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div v-if="row.max_height === null && row.min_height === null">
            不限
          </div>
          <div v-else>
            {{ row.min_height !== null ? row.min_height : '不限' }}-{{
              row.max_height !== null ? row.max_height : '不限'
            }}CM
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="学历要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.educationText }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="婚况要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.marryText }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="职业要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.jobText }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="收入要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.salaryText }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="房子要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.houseText }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="车子要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.carText }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="孩子要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.childText }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="喝酒要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.drinkingText }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="吸烟要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.smokingText }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="生肖要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.zodiacText }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="星座要求"
        prop="created_at"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div>{{ row.constellationText }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="220">
        <template #default="{ row }">
          <el-button text type="primary" @click="handleAiMatch(row)">
            智能匹配
          </el-button>
          <el-button text type="primary" @click="handleManMatch(row)">
            人工匹配
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <ManMatchDrawer ref="manMatchRef" @fetch-data="fetchData" />
    <AiMatchDrawer ref="aiMatchRef" @fetch-data="fetchData" />
  </div>
</template>
<script>
  import VabListNotice from '@/plugins/VabListNotice'
  import ManMatchDrawer from './components/manMatchDrawer'
  import AiMatchDrawer from './components/aiMatchDrawer'
  import { getMemberCoudList } from '@/api/member'
  import { Search } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'MatchManagement',
    components: {
      VabListNotice,
      ManMatchDrawer,
      AiMatchDrawer,
    },
    setup() {
      const state = reactive({
        manMatchRef: null,
        aiMatchRef: null,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          page: 1,
          pageSize: 10,
          username: '',
        },
        contentArray: [
          '您可以在这里直观快捷的查阅到平台中所有会员的择偶要求信息，能够帮助您更加 方便、高效的了解会员的需求，以便提供更加精准的牵线匹配服务;',
          '系统智能匹配是根据会员择偶要求中的“年龄要求”“学历要求”“身高要求”“收入要求”从平台的数据库中自动筛选出符合条件的异性会员资料;',
          '将系统智能匹配出来的会员和红娘人工根据会员昵称搜索出来的会员加入到匹配推荐中，用于记录',
        ],
      })
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.page = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.page = 1
        fetchData()
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getMemberCoudList(state.queryForm)
        state.list = list
        state.total = total
        state.listLoading = false
      }
      const handleManMatch = async (row) => {
        state['manMatchRef'].showEdit(row)
      }

      const handleAiMatch = async (row) => {
        state['aiMatchRef'].showEdit(row)
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        handleManMatch,
        handleAiMatch,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        Search,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .page-search {
    .el-select {
      width: 212px;
    }

    .el-input {
      width: 212px;
      border-left: 1px solid #e2ecfa;
      border-radius: 30px;
    }
  }
  .list-item {
    display: flex;

    &-avatar {
      width: 40px;
      height: 40px;
      border-radius: 6px;
    }

    &-meta {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      margin-left: 10px;

      &-name {
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;

        &-sexicon {
          width: 16px;
          height: 16px;
          margin-left: 3px;
        }
      }

      &-age {
        display: flex;
        font-size: 12px;
        color: rgb(0 0 0 / 45%);
        div:nth-child(n + 1) {
          margin-right: 10px;
        }
      }

      &-time {
        display: flex;
        font-size: 14px;
        color: rgb(0 0 0 / 45%);
        div:nth-child(n + 1) {
          margin-right: 10px;
        }
      }

      &-btn {
        display: flex;
        font-size: 14px;
        color: rgb(0 0 0 / 45%);
        margin-top: 5px;
      }
    }
    &-desc {
      &-content {
        font-size: 14px;

        > span {
          text-align: left;
        }
      }
    }
  }
</style>
